<template>
  <div class="bg">

    <vue-particles class="vue-particles" color="#8EB5C9" :particleOpacity="0.7" :particlesNumber="150" shapeType="star"
      :particleSize="4" linesColor="#8EB5C9" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
      :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" ref="particles">
    </vue-particles>

    
      <header>
        <h1 class="title">游戏服务管理系统</h1>
        <h1 class="title-e">Game Service Management System</h1>
      </header>
      
      <main>
        <el-card class="box-card" >
          <p >请选择登录方式：</p>
          <router-link to="/loginuser"><el-button type="primary" class="btn" >用户登录</el-button></router-link>
          <router-link to="/login"><el-button type="primary"  class="btn" >商家登录</el-button></router-link>
          <router-link to="/loginadmin"><el-button type="primary"  class="btn" >管理员登录</el-button></router-link>

        </el-card>

      </main>

      <footer>
        <span >Copyright © 2024.3.22 涂科网页版权归属. All Rights
          Reserved.</span>
        </footer>

      

  </div>
</template>

<script>


export default {

  data() {
    return {

      message: "Hello Vue!",

    }

  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  margin-top: 1vh;
  margin-right: 3vw;
  width: 100px;
  height: 30px;
}

.bg {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../photo/login.jpg');
}

header {
  margin-top: 50px;

  .title {
    margin-left: 20vw;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 54px;
  }

  .title-e {
    margin-left: 45vw;
    color: #ffffff;
  }
}

main {
  margin-top: 100px;
  margin-left: 30vw;

  .el-card {
    width: 30vw;
    height: 30vh;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;

    p {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .el-button {
      margin-top: 1vh;
      margin-right: 3vw;
    }
  }
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  color: #ffffff;
}


#particles-js {
  position: absolute;
  /* 为防止页面有其他的内容时会挤下去 */
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
</style>